﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
@* 人员管理 *@
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" id="persName" placeholder="请输入" class="layui-input">
                    </div>

                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">部門</label>
                    <div class="layui-input-block">
                        <select id="departmentId" lay-filter="testSelect">
                            <option value=0>请选择部門</option>
                            <option value=1>北京服务部</option>
                            <option value=2>财务部</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">员工状态</label>
                    <div class="layui-input-block">
                        <select id="staffState" lay-filter="testSelect1">
                            <option value="">请选择员工状态</option>
                            <option value="试用员工">试用员工</option>
                            <option value="在职员工">在职员工</option>
                            <option value="实习员工">实习员工</option>
                            <option value="临时工人">临时工人</option>
                            <option value="调职员工">调职员工</option>
                            <option value="专家顾问">专家顾问</option>
                            <option value="返聘人员">返聘人员</option>
                        </select>
                    </div>
                </div>

                

                <button type="button" class="layui-btn layui-bg-red" id="searchBtn" onclick="Show()">查询</button>
                <button type="button" class="layui-btn layui-bg-red" lay-on="test-iframe-curl" onclick="location.href='/User/AddPersonnel'">增加</button>
                <button type="button" class="layui-btn layui-bg-red" lay-on="test-iframe-curl">导入</button>

            </div>

        </div>

        <table class="layui-table">
            <thead>
                <tr>
                    <td>员工编号</td>
                    <td>姓名</td>
                    <td>部门</td>
                    <td>联系方式</td>
                    <td>员工状态</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

        <div id="demo-laypage-all"></div>
    </form>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
    <script>
        layui.use(function () {
            var form = layui.form
            var laypage = layui.laypage;
            var pageIndex = 1;
            var pageSize = 5;



            var $ = layui.$;
            var layer = layui.layer;
            var util = layui.util;
            // 事件
            util.on('lay-on', {

                'test-iframe-curl': function () {
                    layer.open({
                        type: 2,
                        title: '增加栋舍',
                        shadeClose: true,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['900px', '600px'],
                        content: '/User/AddBuildings'
                    });
                }
            })

            Show();
            form.on('select(testSelect)', function (data) {
                Show(data.value); // data.value 返回选中的值
            });
            form.on('select(testSelect1)', function (data) {
                Show(data.value); // data.value 返回选中的值
            });
            $('#searchBtn').click(function () {
                var keyword = $('#persName').val(); // 获取文本框的输入内容
                Show()
            });


            //栋舍显示列表
            function Show() {
               
                var persName = $("#persName").val()
                var departmentId = $("#departmentId").val()
                var staffState = $("#staffState").val()
                console.log(departmentId)
                $.post({
                    url: 'http://localhost:5123/api/UsersInterface/PersonnelSeachs',
                    data: JSON.stringify({ persName: persName, departmentId: departmentId, staffState: staffState, pageIndex: pageIndex, pageSize: pageSize }),
                    async: false,
                    dataType: "json",
                    contentType: "application/json",
                    success: res => {
                        var count = "";

                        $.each(res.data, function () {
                            var bumen = this.departmentId == 1 ? '财务部' : '北京服务部'
                            count += `
                                        <tr>
                                            <td>${this.persId}</td>
                                            <td>${this.persName}</td>
                                            <td>${bumen}</td>
                                             <td>${this.staffState}</td>
                                             <td>${this.persPhone}</td>
                                            <td>
                                              <a onclick="funDel()" class="btn btn-link">编辑</a>
                                              <a onclick="ChaKan(${this.persId})" class="btn btn-link">查看</a>
                                              <a onclick="funDel()" class="btn btn-link">删除</a>
                                            </td>
                                        </tr>
                                        `
                        })
                       
                        //pagedCount = res.pagedCount;
                        //pcount = res.totalCount;
                        $("tbody").html(count)
                        // console.log(res.data)

                        //var page = Math.ceil(res.totalCount / 5);  //总页数
                        console.log(996, pageSize, pageIndex, res);
                        // 完整显示
                        laypage.render({
                            elem: 'demo-laypage-all', // 元素 id
                            curr: pageIndex,//当前页
                            pages: res.pagedCount,    //总页数
                            limit: pageSize,//每页几条
                            limits: [5, 10, 15],
                            count: res.totalCount, // 数据总数
                            layout: ['count', 'prev', 'page', 'first', 'last', 'next', 'limit', 'skip'], // 功能布局
                            jump: function (obj, first) {
                                if (!first) {
                                    console.log(888, obj);
                                    console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
                                    console.log(obj.limit); // 得到每页显示的条数
                                    pageIndex = obj.curr;
                                    pageSize = obj.limit;
                                    Show();
                                }
                            }
                        });
                    }
                })


            }

        });

       
         //查看
        function ChaKan(persId) {
          localStorage.setItem("persId", persId);
          location.href = "/User/GetPersonnel";
         
        }
    </script>


</body>

</html>
@* <script>
    
</script> *@



